<template>
  <Card>
    <Form ref="searchForm" :label-width="90" :model="searchForm" inline>
      <Form-item label="物资名称：" prop="line">
        <Select
          v-model="searchForm.material"
          clearable
          filterable
          multiple
          placeholder="选择物资"
          style="width:100%;"
        >
          <!-- <Option value="-1">全部</Option> -->
          <Option v-for="item in materials" :key="item.id" :value="item.id">{{ item.title }}</Option>
        </Select>
      </Form-item>
      <FormItem label="经手人：">
        <Select
          v-model="searchForm.handler_user_id"
          clearable
          filterable
          learable
          placeholder="选择经手人">
          <Option
            v-for="item in userList"
            :key="item.id"
            :value="item.id"
          >{{ item.name }}
          </Option>
        </Select>
      </FormItem>
      <Form-item label="车辆线路：" prop="line">
        <Select
          v-model="searchForm.line"
          clearable
          filterable
          placeholder="选择线路"
          style="width:200px;"
        >
          <!-- <Option value="-1">全部</Option> -->
          <Option v-for="item in lines" :key="item.line" :value="item.line">{{ item.line }}</Option>
        </Select>
      </Form-item>
      <FormItem label="车队" prop="fleet">
        <Select v-model="searchForm.fleet" clearable filterable>
          <Option value="一车队">一车队</Option>
          <Option value="二车队">二车队</Option>
          <Option value="三车队">三车队</Option>
        </Select>
      </FormItem>
      <Form-item label="出库日期：" prop="date_time">
        <DatePicker
          v-model="searchForm.start_date_time"
          placeholder="请选择开始日期"
          style="width: 200px"
          type="date"
        ></DatePicker>
        <DatePicker
          v-model="searchForm.end_date_time"
          placeholder="请选择结束日期"
          style="width: 200px"
          type="date"
        ></DatePicker>
      </Form-item>
      <Form-item style="margin-left:-90px;">
        <Button icon="md-search" type="primary" @click="handleSearch">搜索</Button>
        <Button @click="handleReset">重置</Button>
      </Form-item>
    </Form>
    <Button
      :disabled="exportBtnDisable"
      icon="md-cloud-download"
      style="margin-bottom:15px"
      type="primary"
      @click="exportOutMaterialStati"
    >导出
    </Button>
    <Table
      :columns="column"
      :data="data"
      :loading="loading"
      border
      size="small"
      stripe></Table>
    <Row class="page" justify="end" type="flex">
      <Page
        :current="searchForm.pageNumber"
        :page-size="searchForm.pageSize"
        :total="total"
        show-total
        @on-change="changePage"
      />
    </Row>
  </Card>
</template>
<script>
import {getUser, outMaterialStatiList} from '../../../api/material'

export default {
  data() {
    return {
      searchForm: {
        line: '-1',
        material: [],
        start_date_time: '',
        end_date_time: '',
        pageNumber: 1, // 当前页数
        pageSize: 10 // 页面大小
      },
      loading: false,
      data: [],
      modal: false,
      importLoading: false,
      exportBtnDisable: false,
      total: 0,
      column: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {title: '品名', key: 'title', align: 'center', width: 200},
        {title: '线路', key: 'line', align: 'center', width: 100},
        {title: '车号', key: 'bus_num', align: 'center', width: 100},
        {title: '规格', key: 'specs', align: 'center', width: 120},
        {title: '单位', key: 'unit', align: 'center', width: 120},
        {title: '数量', key: 'total_amount', align: 'center', width: 120},
        {title: '单价', key: 'price', align: 'center', width: 100},
        {title: '总金额', key: 'total_price', align: 'center', width: 100},
        {title: '出库时间', key: 'out_time', align: 'center', width: 200},
        {title: '更新时间', key: 'updated_at', align: 'center', width: 200}
      ],
      lines: [],
      materials: [],
      date_text: '',
      userList: []
    }
  },
  watch: {
    $route: 'handleReset'
  },
  mounted() {
    this.init()
  },
  methods: {
    changePage(v) {
      this.searchForm.pageNumber = v
      this.getList()
    },
    //导出
    exportOutMaterialStati() {
      const line = this.searchForm.line
      const start_date_time = this.searchForm.start_date_time
      const end_date_time = this.searchForm.end_date_time
      const material = this.searchForm.material
      const handler_user_id = this.searchForm.handler_user_id
      const fleet = this.searchForm.fleet
      let start_date = ''
      let end_date = ''
      if (start_date_time) {
        const start_d = new Date(start_date_time)
        start_date =
          start_d.getFullYear() +
          '-' +
          (start_d.getMonth() + 1) +
          '-' +
          start_d.getDate()
      }
      if (end_date_time) {
        const end_d = new Date(end_date_time)
        end_date =
          end_d.getFullYear() +
          '-' +
          (end_d.getMonth() + 1) +
          '-' +
          end_d.getDate()
      }
      window.location.href =
        '/api/exportOutMaterialStati?line=' +
        line +
        '&material=' +
        material +
        '&start_date_time=' +
        start_date +
        '&end_date_time=' +
        end_date +
        '&handler_user_id=' +
        handler_user_id +
        '&fleet=' +
        fleet
    },
    getList() {
      this.loading = true
      outMaterialStatiList(this.searchForm).then(res => {
        this.loading = false
        if (res.data) {
          this.data = res.data.result
          this.total = res.data.count
          this.lines = res.data.line
          this.materials = res.data.material
        }
      })
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getList()
    },
    handleSearch() {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getList()
    },
    init() {
      this.getList()
      this.getUser()
    },
    getUser() {
      getUser().then(res => {
        if (res.data.result) {
          this.userList = res.data.result
        }
      })
    }
  }
}
</script>
